<template>
  <div class="home app-main">
    <div class="section-main">
      <div class="font">
        <img src="../../assets/img/index/index_font1.png" alt="">
      </div>
      <div class="font font-big">
        <img src="../../assets/img/index/index_font3.png" alt="">
      </div>
      <div class="font font-long">
        <img src="../../assets/img/index/index_font2.png" alt="">
      </div>
    </div>
    <div class="section-bottom">
          <div class="show-div">
              <router-link :to="{ path: '/choose'}">
                <btn-router
                  :background='require("../../assets/img/index/index_btn.png")'
                  color='#fff'
                  right='0'
                  :width=297
                  :height=66
                  size='16'
                >开始制作</btn-router>
              </router-link>
          </div>
          <div class="back-div">
              <router-link :to="{ path: '/my'}">
                <btn-router
                  :background='require("../../assets/img/index/index_btn.png")'
                  right='0'
                  color='#fff'
                  :width=297
                  :height=66
                  size='16'
                >我的贺卡</btn-router>
              </router-link>
          </div>
    </div>
  </div>
</template>

<script>
import btnRouter from '@/components/routerButton'// 跳转按钮组件
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components: {
    btnRouter
  },
  methods: {

  }
}
</script>

<style scoped>
.home::before{content:"";background:url(../../assets/img/index/index_head.png) no-repeat top left;background-size:cover;position: absolute;top: 0;width: 100%;height: 2.16rem}
.home{background:url(../../assets/img/index/index_background.png) no-repeat top left;background-size:cover;}
.section-main{width: 100%;position: relative;top:2.7rem;}
.font{width:5.8rem;margin: 0 auto}
.font img{width:100%}
.font-big{width:95%;margin:1.1rem auto}
.font-long{width:6.8rem;}
.section-bottom{position:absolute;bottom:0;width:100%}
.section-bottom img{position:absolute;bottom:0;width:100%;right:0;}
.show-div{display:inline-block;position:relative;bottom:.2rem;left:0.5rem}
.back-div{display:block;position:relative;bottom:.2rem;right:0.5rem;float:right}
</style>
